/*
  学习目标：生命周期-挂载阶段
    
*/

import React, { Component } from 'react';

export default class App extends Component {
  // 1. constructor :
  // 类似: vue中的created
  // 作用: 👎早期, 用来创建state 和 ref对象, 现在几乎不用
  constructor() {
    //  表示继承父级所有的属性和方法, 固定语法, 必须写
    super();
    console.log('constructor 执行了  ----->  ');
    this.state = {
      msg: 'hello React',
    };
  }

  // 2. render
  // 作用:  渲染dom元素
  render() {
    console.log('render执行了  ----->  ');
    return <div id="box">App - {this.state.msg}</div>;
  }

  // 3. componentDidMount
  // 类型: vue中的mounted
  // 场景:  1. 💥发请求  2.最先获取dom元素, 如给dom元素绑定事件等
  componentDidMount() {
    console.log(' componentDidMount执行了  ----->  ');
    const div = document.querySelector('#box');
    console.log('div  ----->  ', div);
  }
}
